<template>
    <div class="container">
        <div style="display: flex; grid-gap: 10px;justify-content: flex-start; margin-bottom: 10px;">
            <div class="card" style="width: 50%; height: 400px;" id="bar"></div>
            <div class="card" style="width: 50%; height: 400px;" id="line"></div>
        </div>

        <div style="display: flex; grid-gap: 10px;">
            <div class="card" style=" height: 400px; width: calc(50% - 25px);" id="pie"></div>
        </div>
    </div>
</template>

<script setup>
import {onMounted, reactive } from 'vue';
import * as echarts from 'echarts';
import request from '@/utils/request';

 const baroption = reactive({
  title: {
    text: '各部门员工数量'
  },
  tooltip: {},
  legend:{
    trigger: 'item'
  },
  xAxis: {
    data: ['人数']
  },
  yAxis: {},
  series: [
    {
      name: '人数',
      type: 'bar',
      data: [],
      //设置柱状图颜色
      itemStyle:{
        normal:{
          color: function(params){
            let colors = ['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#3ba272']
            return colors[params.dataIndex % colors.length]
          }
        }
      }
    }
  ]
});

const lineoption = reactive({
  title: {
    text: '最近七天发布的文章数量'
  },
  tooltip: {},
  legend:{
    data: ['发布文章数量']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '发布数量',
      type: 'line',
      data: [],
      smooth: true
    }
  ]
});

const pieoption = reactive({
  title: {
    text: '各部门员工数量比例图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend:{
    orient: 'vertical',
    right: 'right'
  },
  series: [
    {
      name: '员工数量',
      type: 'pie',
      radius: '50%',
      data: [],
      label: {
        formatter: '{b}: {@2012} ({d}%)'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});

onMounted(()=>{
    // 基于准备好的dom，初始化echarts实例
    const barChart = echarts.init(document.getElementById('bar'));    
    request.get('/getBar').then(res =>{      
      baroption.xAxis.data = res.data.department
      baroption.series[0].data = res.data.count
      barChart.setOption(baroption)
    })

    const lineChart = echarts.init(document.getElementById('line'));    
    request.get('/lineData').then(res =>{       
      lineoption.xAxis.data = res.data.date
      lineoption.series[0].data = res.data.count
      lineChart.setOption(lineoption)
    })
    
    const pieChart = echarts.init(document.getElementById('pie'));    
    request.get('/pieData').then(res =>{ 
      pieoption.series[0].data = res.data
      pieChart.setOption(pieoption)
    })
})
</script>